<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import type { UserLoginInfo } from '@/types/sign'
import { getCaptcha, login } from '@/api/sign'
import { setJwt } from '@/util/token'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { useConfigStore } from '@/stores/config'
const router = useRouter()
const loginInfoForm = ref<UserLoginInfo>({
  username: '',
  password: '',
  code: '',
  token: ''
})
const captcha = ref('')
const loginInfoRules = ref<FormRules<UserLoginInfo>>({
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur'
    },
    {
      max: 25,
      min: 8,
      message: '账号的长度应该为8-25个字符',
      trigger: 'blur'
    },
    {
      pattern: '',
      message: '账号只包含数字以及字母',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    },
    {
      max: 25,
      min: 8,
      message: '密码的长度应该为8-25个字符',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码'
    }
  ]
})
onMounted(() => {
  checkCaptcha()
})

/**
 * 刷新验证码
 */
function checkCaptcha() {
  getCaptcha().then((d) => {
    captcha.value = d.data.img
    loginInfoForm.value.token = d.data.token
    loginInfoForm.value.code = ''
  })
}

const config = useConfigStore()

const loginFrom = ref<FormInstance>()
// 用户登陆
function userLogin() {
  if (!loginFrom.value) {
    return
  }
  loginFrom.value.validate((e) => {
    if (e) {
      login(loginInfoForm.value)
        .then((d) => {
          ElMessage.success(d.msg)
          setJwt(d.data)
          router.push({ name: 'home' })
        })
        .catch((d) => {
          checkCaptcha()
          ElMessage.warning(d.msg)
          config.getData()
        })
    }
  })
}

function getConfig(key: string) {
  return config.data.get(key)?.value
}

function loginKeyDown(event: KeyboardEvent) {
  if (event.code == 'Enter') {
    userLogin()
  }
}
addEventListener('keydown', loginKeyDown)
onUnmounted(() => {
  removeEventListener('keydown', loginKeyDown)
})
</script>
<template>
  <h2 id="sys-title">{{ getConfig('##sysName') }}</h2>
  <div class="login-box">
    <h1 class="box-title">登陆</h1>
    <div class="box-ctx">
      <el-form ref="loginFrom" label-width="80px" :model="loginInfoForm" :rules="loginInfoRules">
        <el-form-item label="用户名：" prop="username"
          ><el-input placeholder="请输入用户名" v-model="loginInfoForm.username"></el-input
        ></el-form-item>
        <el-form-item label="密码：" prop="password"
          ><el-input
            show-password
            placeholder="请输入密码"
            v-model="loginInfoForm.password"
          ></el-input
        ></el-form-item>
        <el-form-item label="验证码：" prop="code" v-if="getConfig('##Captcha') == 'on'">
          <div class="login-code-box">
            <el-input
              placeholder="验证码"
              class="login-code-input"
              v-model="loginInfoForm.code"
            ></el-input>
            <div @click="checkCaptcha" class="captcha-box">
              <img class="captcha" :src="'data:video/mp4;base64,' + captcha" alt="" />
              <span class="captcha-text">看不清</span>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="buttons">
        <el-button class="login" type="primary" @click="userLogin">登陆</el-button>
        <el-button class="register" @click="router.push({ name: 'register' })" type="success"
          >注册</el-button
        >
      </div>
    </div>
  </div>
  <div class="footer">
    <p v-show="getConfig('##bnSwitch') == 'on'">
      <span>{{ getConfig('##BeiANHao') }}&nbsp;</span>
      <span>网站所有者：{{ getConfig('##domain') }}&nbsp;</span>
      <span>单位名称：{{ getConfig('##UnitName') }}&nbsp;</span>
      <span>备案时间：{{ getConfig('##beiAnTime') }}</span>
    </p>
  </div>
</template>
<style lang="less" scoped>
#sys-title {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  color: rgb(97, 121, 239);
}

// 登陆框
.login-box {
  width: 350px;
  position: absolute;
  top: 100px;
  box-sizing: border-box;
  right: 200px;
  padding: 20px;

  @media (max-width: 900px) {
    top: calc(50% - 150px);
    left: calc(50% - 185px);
  }

  @media (max-width: 400px) {
    width: 100%;
    left: 0;

    .captcha-text {
      display: none;
    }
  }

  border-radius: 7px;
  text-align: center;
  box-shadow: 0px 0px 8px rgba(133, 133, 133, 0.536);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.244);
  backdrop-filter: blur(10px);

  .box-title {
    padding-bottom: 20px;
    color: rgb(97, 121, 239);
  }

  .login-code-box {
    display: flex;
    flex-wrap: nowrap;
  }

  .login-code-input {
    width: 80px;
    height: 30px;
  }
}

// 验证码
.captcha-box {
  width: calc(100% - 80px);
  user-select: none;
  position: relative;
  height: 30px;
  line-height: 30px;
  cursor: pointer;

  span {
    display: inline-block;
    line-height: 25px;
    font-size: 12px;
    color: rgb(119, 119, 119);
    text-decoration: underline 1px blue solid;
  }

  .captcha {
    width: 100px;
    line-height: 30px;
    height: 30px;
  }

  .captcha-text {
    line-height: 30px;
    width: 3em;
    position: absolute;
    left: 100%;
  }
}

.buttons {
  margin-top: 45px;

  .login,
  .register {
    width: 100px;
  }
}

.footer {
  position: absolute;
  width: 100%;
  bottom: 20px;
  font-size: 12px;
  text-align: center;
  color: rgb(182, 182, 182);
}
</style>
